@import "mixin";
$lightbox-popup-width:500px;
#G-lightbox-mask{
  position: fixed;
  left: 0;
  top:0;
  width:100%;
  height:100%;
  background-color: #000;
  @include opacity(0.5);
  z-index: 10000;
  display: none;
}
#G-lightbox-popup{
  position: fixed;
  width:$lightbox-popup-width;
  left:50%;
  top:200px;
  margin-left: -$lightbox-popup-width /2;
  z-index: 10001;
  display: none;


  & .lightbox-pic-view{
      position: relative;
      border: 5px solid #fff;
      border-radius: 5px;
      overflow: hidden;
      background-image: url("../img/icon/loading.gif");
      background-repeat: no-repeat;
      background-position: center center;
    background-color: #fff;
    z-index: 2;

    & .lightbox-btn{
      position: absolute;
      top: 0;
      width: 40%;
      background-color: #000;
      @include opacity(0);
      z-index: 1;
      height: 100%;
    }
    & .lightbox-prev-btn{
      left:0;
    }

    & .lightbox-prev-btn-show{
      background-image: url("../img/icon/prev.png");
      background-repeat: no-repeat;
      background-position: left center;
      cursor: pointer;
    }

    & .lightbox-next-btn-show{
      background-image: url("../img/icon/next.png");
      background-repeat: no-repeat;
      background-position: right center;
      cursor: pointer;
    }
    & .lightbox-image{
      display: block;
    }
    & .lightbox-next-btn{
      right:0;
    }
  }

  & .lightbox-pic-caption{

    position: relative;
    background-color: #000;
    margin: 0 5px;
    @include opacity(0.5);
    margin-top: -93px;
    z-index: 2;

    & .lightbox-caption-area{

        color:#fff;
        padding: 10px 5px;

      & .lightbox-pic-desc{

      }
      & .lightbox-of-index{
        color:#999;
      }
    }
    & .lightbox-close-btn{
      position: absolute;
      width: 27px;
      height: 27px;
      background-image: url("../img/icon/close.png");
      right:10px;
      top:13px;
      z-index: 3;
    }
  }
}





